<template>
	<view class="order-list">
		<uni-card :title="orderInfo.orderNo" :extra="orderInfo.progressStatus" class="item">
			<view v-for="item in orderInfo.goodsList" class="goods">
				<view class="left"><text :selectable="true">{{item.goodsName}}</text></view>
				<view class="center">×{{item.goodsNum}}</view>
				<view class="right">¥{{item.totalMoney/100}}</view>
			</view>

			<view class="goods">
				<view class="left">总计：</view>
				<view class="center">×{{goodsTotalNum}}</view>
				<view class="right">¥{{goodsTotalMoney/100}}</view>
			</view>

			<view class="order-info">
				<uni-row>
					<uni-col :span="7">下单时间：</uni-col>
					<uni-col :span="17">{{orderInfo.createTime}}</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="7">完成时间：</uni-col>
					<uni-col :span="17">{{orderInfo.completeTime}}</uni-col>
				</uni-row>
			</view>
		</uni-card>

	</view>
</template>

<script>
	import { OrderApi } from '@/api/food/OrderApi'

	export default {
		data() {
			return {
				Config: this.$Config,
				Common: this.$Common,
				Auth: this.$Auth,
				ShareUtil: this.$ShareUtil,
				State: this.$store.state,
				Dict: this.$Dict,
			
				orderInfo: {},
				goodsTotalNum: 0,
				goodsTotalMoney: 0
			}
		},
		computed: {

		},
		onLoad(e) {
			let that = this
            OrderApi.getOrderDetailByOrderNo({ orderNo: e.orderNo }).then((response) => {
				this.orderInfo = response
				response.goodsList.forEach(item => {
					that.goodsTotalNum += item.goodsNum
					that.goodsTotalMoney += item.totalMoney
				})
			})
		},
		methods: {
			initPage: function() {},
		}
	}
</script>

<style lang="scss">
	.order-list {
		margin-top: 10px;
	}
	.goods {
		line-height: 36px;
		border-bottom: 1px solid #EEE;
		display: flex;
	}
	.goods .left {
		flex: 1;
		line-height: 20px;
		padding: 10px 0;
	}
	.goods .center {
		width: 40px;
	}
	.goods .right {
		width: 50px;
	}
	.order-info {
		margin-top: 10px;
	}
	.order-info .uni-col {
		line-height: 16px;
		padding: 10px 0;
	}
</style>
